<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import BackTop from "./BackTop.svelte";
    import { fn } from "storybook/test";
    import Icon from "@iconify/svelte";

    const { Story } = defineMeta({
        title: "Components/Other/BackTop",
        component: BackTop,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
    let target = $state<HTMLElement>();
</script>

<Story name="Default">
    {#snippet template(args)}
        <div style="height: 1000px;">
            <p>scroll to bottom</p>
            <BackTop>
                {#snippet icon()}
                    <Icon icon="f7:arrow-up-to-line" />
                {/snippet}
            </BackTop>
        </div>
    {/snippet}
</Story>

<Story name="Target">
    {#snippet template(args)}
        <div style="height: 400px; border: 1px solid #ccc; overflow: auto; position: relative;" bind:this={target}>
            <p>scroll to bottom</p>
            <div style="height: 1000px;"></div>
            <BackTop target={() => target!}>
                {#snippet icon()}
                    <Icon icon="f7:arrow-up-to-line" />
                {/snippet}
            </BackTop>
        </div>
    {/snippet}
</Story>
